<template>
  <el-dialog
    :visible.sync="visible"
    title="详情"
    width="1000px"
    append-to-body
    :close-on-click-modal="false"
    class="zybm-detail-dialog"
    @close="handleClose"
  >
    <!-- 表单容器：统一包裹所有模块，确保样式一致性 -->
    <el-form class="detail-form" :label-position="labelPosition">
      <!-- 1. 基本信息区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-info-circle section-icon" />
          <div class="section-title">编目信息</div>
        </div>
        <!-- 采用2列布局：将字段分组，减少纵向长度，更规整 -->
        <el-row :gutter="24" class="section-content">
          <!-- 第一列 -->

          <el-form-item label="信息资源分类：" class="detail-form-item">
            <div class="form-content">
              <div v-for="(node, index) in formData.dataNodes" :key="index" class="tag-item">
                {{ node }}
              </div>
              <!-- 空状态提示 -->
              <div v-if="formData.dataNodes.length === 0" class="empty-tip">未选择</div>
            </div>
          </el-form-item>

          <el-form-item label="编目名称：" class="detail-form-item">
            <div class="form-content">{{ formData.catalogName || '未填写' }}</div>
          </el-form-item>

          <el-form-item label="信息资源提供方：" class="detail-form-item">
            <div class="form-content">{{ formData.dataSource || '未选择' }}</div>
          </el-form-item>

          <el-form-item label="更新周期：" class="detail-form-item">
            <div class="form-content">{{ formData.updateCycle || '未选择' }}</div>
          </el-form-item>

          <el-form-item label="数据量（条数）：" class="detail-form-item">
            <div class="form-content">{{ formData.dataVolume || '未填写' }}</div>
          </el-form-item>

          <el-form-item label="数据所在层级：" class="detail-form-item">
            <div class="form-content">{{ formData.dataLevel || '未选择' }}</div>
          </el-form-item>

          <el-form-item v-if="formData.sharedType === '有条件共享'" label="共享条件：" class="detail-form-item">
            <div class="form-content condition-content">
              {{ formData.sharedCondition || '无特殊条件' }}
            </div>
          </el-form-item>

          <el-form-item label="信息资源摘要：" class="detail-form-item">
            <div class="form-content">{{ formData.catalogDescription || '未填写' }}</div>
          </el-form-item>

          <el-form-item label="数据分级：" class="detail-form-item">
            <!-- 给数据分级加标签样式，突出重要性 -->
            <div class="form-content">
              <el-tag
                :type="formData.dataClassification === '核心数据' ? 'danger' : formData.dataClassification === '重要数据' ? 'warning' : 'info'"
                size="mini"
              >
                {{ formData.dataClassification || '未选择' }}
              </el-tag>
            </div>
          </el-form-item>

          <el-form-item label="数据时间范围：" class="detail-form-item">
            <div class="form-content">
              {{ (formData.dataBeginTime || '未选择') + ' - ' + (formData.dataEndTime || '未选择') }}
            </div>
          </el-form-item>

          <el-form-item label="政务数据提供方：" class="detail-form-item">
            <div class="form-content">{{ formData.governmentDataProvider || '沧州市数据局' }}</div>
          </el-form-item>

          <el-form-item label="是否向社会开放：" class="detail-form-item">
            <!-- 用图标+文本增强视觉区分 -->
            <div class="form-content">
              <span class="status-text">
                {{ formData.isPublic === '0' ? '是' : formData.isPublic === '1' ? '否' : '未选择' }}
              </span>
            </div>
          </el-form-item>

          <el-form-item label="共享类型：" class="detail-form-item">
            <div class="form-content">
              <el-tag
                :type="formData.sharedType === '无条件共享' ? 'success' :
                  formData.sharedType === '有条件共享' ? 'primary' : 'default'"
              >
                {{ formData.sharedType || '未选择' }}
              </el-tag>
            </div>
          </el-form-item>

          <el-form-item label="编目状态：" class="detail-form-item">
            <div class="form-content">
              <el-tag :type="catalogStatusTag[formData.catalogStatusTag]">
                {{ formData.catalogStatus }}
              </el-tag>

            </div>
          </el-form-item>

          <el-form-item label="共享方式：" class="detail-form-item">
            <div class="form-content">
              <div v-for="(way, index) in formData.sharedWay" :key="index" class="way-item">
                <i class="el-icon-check-circle" style="color: #67C23A;" />
                <span>{{ way }}</span>
              </div>
              <div v-if="formData.sharedWay.length === 0" class="empty-tip">未选择任何共享方式</div>
            </div>
          </el-form-item>

        </el-row>
      </div>
      <!-- 3. 数据项区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-table section-icon" />
          <div class="section-title">数据项详情</div>
        </div>
        <div class="section-content">
          <!-- 表格加边框、 hover 效果，提升可读性 -->
          <el-table
            :data="formData.dataItems"
            style="width: 100%;"
            border
            stripe
            :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
            :empty-text="formData.dataItems.length === 0 ? '暂无数据项' : ''"
          >
            <el-table-column prop="itemName" label="数据项名称" width="180" />
            <el-table-column prop="itemEnglishName" label="数据项英文名" />
            <el-table-column prop="dataTypeLabel" label="数据类型" />
            <el-table-column prop="dataLength" label="数据长度" align="center" />
            <el-table-column prop="isDictLabel" label="是否有字典项" align="center" />
            <!-- <el-table-column prop="sharedTypeLabel" label="共享类型" align="center" /> -->
            <el-table-column prop="isRequiredLabel" label="是否必填" align="center">
              <template slot-scope="scope">
                <el-tag size="mini" :type="scope.row.isRequiredLabel === '是' ? 'success' : 'info'">
                  {{ scope.row.isRequiredLabel }}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!-- 3. 申请信息区域（优化后） -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-info-circle section-icon" />
          <div class="section-title">申请信息</div>
        </div>

        <!-- 采用24列网格系统，确保左右两列对齐 -->
        <el-row :gutter="20" class="section-content">
          <!-- 左侧列：基础申请信息 -->

          <el-form-item label="编目名称：" class="detail-form-item">
            <div class="form-content">{{ form.catalogName || formData.catalogName || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请编号：" class="detail-form-item">
            <div class="form-content">{{ form.appNub || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请单位：" class="detail-form-item">
            <div class="form-content">{{ form.appDept || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请人姓名：" class="detail-form-item">
            <div class="form-content">{{ form.appName || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请人电话：" class="detail-form-item">
            <div class="form-content">{{ form.appPhone || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请人邮箱：" class="detail-form-item">
            <div class="form-content">{{ form.appEmail || '未填写' }}</div>
          </el-form-item>

          <el-form-item label="应用场景：" class="detail-form-item">
            <div class="form-content">{{ form.appScenarios || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="应用事项：" class="detail-form-item">
            <div class="form-content">{{ form.appMatters || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请依据：" class="detail-form-item">
            <div class="form-content">{{ form.appBasis || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="申请状态：" class="detail-form-item">
            <div class="form-content">
              <el-tag :type="getAppStuType(form.appStu)" size="mini" class="status-tag">
                {{ form.appStu || '未填写' }}
              </el-tag>
            </div>
          </el-form-item>
          <el-form-item label="业务系统：" class="detail-form-item">
            <div class="form-content">{{ form.appSystem || '未填写' }}</div>
          </el-form-item>
          <el-form-item label="系统部署地址：" class="detail-form-item">
            <div class="form-content">{{ form.appSystemLocation || '未填写' }}</div>
          </el-form-item>

        </el-row>

        <!-- 动态调用方式区域（单独一行，避免跨列对齐问题） -->
        <div v-if="form.appMethod === 'API' || form.appMethod === '数据库'" class="dynamic-group">
          <div class="group-title">{{ form.appMethod === 'API' ? 'API配置信息' : '数据库配置信息' }}</div>
          <el-row :gutter="20">
            <div v-if="form.appMethod === 'API'">
              <h4 style="font-weight: bold;margin: 10px 0">
                API接口调用说明
              </h4>
              <ol>
                <li> 一、调用API鉴权说明</li>
                <li> 1.在HEADER位置强制校验token传参</li>
                <li> header中增加传参token，参数值为对应个人中心的AppKey值</li>
                <li> 2.在header中增固定传参Content-Type</li>
                <li> header中固定传 Content-Type，参数值固定 application/json</li>
              </ol>
              <h4 style="font-weight: bold;margin-top: 20px">如下图：</h4>
              <img
                :src="require('@/assets/images/apiSm.jpg')"
                alt="API调用说明图"
                style="margin-top: 12px; max-width: 100%;"
              >
            </div>

            <!-- API动态字段 -->
            <template v-if="form.appMethod === 'API'">
              <el-form-item
                v-if="form.apiLife !== undefined && form.apiLife !== null && form.apiLife !== ''"
                label="使用期限(天)："
                class="detail-form-item dynamic-item"
              >
                <div class="form-content">{{ form.apiLife }}</div>
              </el-form-item>
              <el-form-item label="API调用频率(天)：" class="detail-form-item dynamic-item">
                <div class="form-content">{{ form.apiCallFrequency || '未填写' }}</div>
              </el-form-item>
            </template>

            <!-- 数据库动态字段 -->
            <template v-if="form.appMethod === '数据库'">
              <el-form-item label="数据库地址(ip+端口)：" class="detail-form-item dynamic-item">
                <div class="form-content ip-content">{{ form.databaseAddress || '未填写' }}</div>
              </el-form-item>
            </template>

            <!-- API时间信息 -->
            <template v-if="form.appMethod === 'API'">
              <el-form-item label="API调用起始时间：" class="detail-form-item dynamic-item">
                <div class="form-content">{{ formatTime(form.apiTimeStart) }}</div>
              </el-form-item>
              <el-form-item label="API调用结束时间：" class="detail-form-item dynamic-item">
                <div class="form-content">{{ formatTime(form.apiTimeEnd) }}</div>
              </el-form-item>
            </template>
          </el-row>
        </div>

        <!-- 附件与备注区域（单独一行） -->
        <el-row :gutter="24" style="margin-top: 16px;">
          <el-col :span="12" style="padding-left: 8px;">
            <el-form-item label="附件：" class="detail-form-item file-form-item" style="width: 100%;">
              <div class="form-content">
                <!-- <a v-if="form.attachment" :href="form.attachment" target="_blank" class="attachment-link">
                  <i class="el-icon-download" style="margin-right: 4px;" />
                  {{ form.attachment.split('/').pop() || '附件文件' }}
                </a> -->
                <span v-if="form.dataFiles && form.dataFiles.length > 0" class="file-pbox">
                  <span v-for="item in form.dataFiles" :key="item.id" class="file-item" @click="downLoad(item)">
                    {{ item.name }}
                  </span>

                </span>
                <span v-else class="empty-tip">无附件</span>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="padding-left: 0px;">
            <el-form-item label="备注：" class="detail-form-item bz-form-item">
              <div class="form-content remark-content">
                {{ form.remarks || '无备注' }}
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 新增资源详情区域 -->

      <!-- 新增：挂载资源详情区域 -->
      <div class="section-card">
        <div class="section-header">
          <i class="el-icon-info-circle section-icon" />
          <div class="section-title">挂载资源详情</div>
        </div>
        <div class="section-content">
          <!-- 有资源数据时显示详情 -->
          <div v-if="Object.keys(dataResources).length > 0" style="width:100%">
            <el-row :gutter="24" class="section-content">
              <!-- 左侧列 -->

              <el-form-item label="资源ID：" class="detail-form-item">
                <div class="form-content">{{ dataResources.id || '无' }}</div>
              </el-form-item>
              <el-form-item label="资源名称：" class="detail-form-item">
                <div class="form-content">{{ dataResources.resourceName || '无' }}</div>
              </el-form-item>
              <el-form-item label="资源类型：" class="detail-form-item">
                <div class="form-content">
                  <el-tag
                    :type="dataResources.resourceType === '0' ? 'primary' : dataResources.resourceType === '1' ? 'success' : 'info'"
                  >
                    {{
                      dataResources.resourceType === '0' ? 'API'
                      : dataResources.resourceType === '1' ? '数据库'
                        : dataResources.resourceType === '2' ? '文件'
                          : '未知类型'
                    }}
                  </el-tag>
                </div>
              </el-form-item>
              <el-form-item label="创建人：" class="detail-form-item">
                <div class="form-content">{{ dataResources.createBy || '无' }}</div>
              </el-form-item>
              <el-form-item label="创建时间：" class="detail-form-item">
                <div class="form-content">{{ dataResources.createTime || '无' }}</div>
              </el-form-item>
              <el-form-item label="更新人：" class="detail-form-item">
                <div class="form-content">{{ dataResources.updateBy || '无' }}</div>
              </el-form-item>
              <el-form-item label="更新时间：" class="detail-form-item">
                <div class="form-content">{{ dataResources.updateTime || '无' }}</div>
              </el-form-item>

              <el-form-item label="资源说明：" class="detail-form-item">
                <div class="form-content remark-content">{{ dataResources.resourceSm || '无' }}</div>
              </el-form-item>
              <el-form-item label="数据项说明：" class="detail-form-item">
                <div class="form-content remark-content">{{ dataResources.resourceDataItem || '无' }}</div>
              </el-form-item>

              <!-- API特有信息 -->
              <template v-if="dataResources.resourceType === '0'">
                <el-form-item label="API地址：" class="detail-form-item ip-content">
                  <div class="form-content">{{ dataResources.resourceApiUrl || '无' }}</div>
                </el-form-item>
                <el-form-item label="请求方式：" class="detail-form-item">
                  <div class="form-content">
                    <el-tag
                      :type="dataResources.resourceType === '0' ? 'primary'
                        : dataResources.resourceType === '1' ? 'success'
                          : dataResources.resourceType === '2' ? 'info' : ''"
                    >
                      {{
                        dataResources.resourceType === '0' ? 'API'
                        : dataResources.resourceType === '1' ? '数据库'
                          : dataResources.resourceType === '2' ? '文件'
                            : '未知类型'
                      }}
                    </el-tag>
                  </div>
                </el-form-item>
                <el-form-item label="API ID：" class="detail-form-item">
                  <div class="form-content">{{ dataResources.resourceApiId || '无' }}</div>
                </el-form-item>
              </template>

            </el-row>

            <!-- API参数详情（仅API类型显示） -->
            <template v-if="dataResources.resourceType === '0'">
              <div class="dynamic-group" style="margin-top: 16px;">
                <div class="group-title">接口参数详情</div>
                <el-row :gutter="24">
                  <!-- <el-col :span="12" class="desc-gt">

                    <div class="my-tit">
                      请求参数：
                    </div>
                    <div class="form-content remark-content tit-con">
                      <div v-if="dataResources.resourceApiReq" style="line-height: 24px;">
                        {{ dataResources.resourceApiReq }}
                      </div>
                      <span v-else class="empty-tip">无请求参数</span>
                    </div>
                  </el-col>
                  <el-col :span="12" class="desc-gt">

                    <div class="my-tit">
                      响应参数：
                    </div>
                    <div class="form-content remark-content tit-con">
                      <div v-if="dataResources.resourceApiRsp" style="line-height: 24px;">
                        {{ dataResources.resourceApiRsp }}
                      </div>
                      <span v-else class="empty-tip">无响应参数</span>
                    </div>
                  </el-col> -->
                  <div class="my-tit">
                    请求参数：
                  </div>
                  <codemirror
                    v-model="dataResources.resourceApiReq"
                    :style="codemirrorStyle"
                    :options="cmOptions"
                    @ready="onCmReady"
                  />
                  <div class="my-tit">
                    响应参数：
                  </div>
                  <codemirror
                    v-model="dataResources.resourceApiRsp"
                    :style="codemirrorStyle"
                    :options="cmOptions"
                    @ready="onCmReady"
                  />

                </el-row>
              </div>
            </template>
          </div>

          <!-- 无资源数据时显示提示 -->
          <div v-else class="empty-state">
            <div class="empty-icon">
              <i class="el-icon-info" style="font-size: 24px; color: #909399;" />
            </div>
            <div class="empty-text">暂无挂载信息</div>
          </div>
        </div>
      </div>
    </el-form>
    <!-- 底部按钮：居中显示，增加点击区域 -->
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" style="width: 120px;" @click="visible = false">
        关闭
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { downloadFile } from '@/api/xwZx'
import { getAlldept } from '@/api/zybm'

import { codemirror } from 'vue-codemirror'

import 'codemirror/lib/codemirror.css'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/addon/lint/json-lint'
import 'codemirror/addon/lint/javascript-lint'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/base16-dark.css'
import 'codemirror/addon/fold/foldgutter.css'
import 'codemirror/addon/fold/foldcode'
import 'codemirror/addon/fold/foldgutter'
import 'codemirror/addon/fold/brace-fold'
import 'codemirror/addon/fold/comment-fold'
import 'codemirror/addon/fold/markdown-fold'
import 'codemirror/addon/fold/xml-fold'
import 'codemirror/addon/fold/indent-fold'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/xml-hint'
import 'codemirror/addon/hint/sql-hint'
import 'codemirror/addon/hint/anyword-hint'
import 'codemirror/addon/search/match-highlighter'
import 'codemirror/addon/edit/matchbrackets'
import 'codemirror/addon/edit/closebrackets'
import 'codemirror/mode/css/css.js'
import 'codemirror/mode/vue/vue.js'

export default {
  name: 'DetailsDialog',
  components: { codemirror },

  data() {
    return {
      dataResources: {},
      // statusMap: { 0: '待处理', 1: '审批通过', 2: '审批拒绝', 3: '已撤销' },
      statusMap: { 0: '待审批', 1: '数据局审批通过', 2: '审批通过', 3: '审批拒绝', 4: '已撤销', 5: '删除' },

      methodMap: { 0: 'API', 1: '数据库', 2: '文件' },
      form: {
        comment: '',
        result: 1,
        id: '',
        appNub: '',
        appDept: '',
        appPhone: '',
        appEmail: '',
        appName: '',
        appScenarios: '',
        appMatters: '',
        appBasis: '',
        appSystem: '',
        appId: '',
        appSystemLocation: '',
        appMethod: '',
        apiCallFrequency: '',
        apiTimeStart: '',
        apiTimeEnd: '',
        databaseAddress: '',
        catalogName: '',
        appStu: '',
        remarks: '',
        apiLife: ''
      },
      visible: false,
      detailData: null,
      labelPosition: 'right',
      // 1. 初始化formData，包含所有需要渲染的模块字段
      formData: {
        // 基本信息模块
        dataNodes: [], // 信息资源分类（数组，存显示文本）
        catalogName: '', // 编目名称
        dataSource: '', // 信息资源提供方
        catalogDescription: '', // 信息资源摘要
        updateCycle: '', // 更新周期
        dataClassification: '', // 数据分级
        dataVolume: '', // 数据量（条数）
        dataBeginTime: '', // 数据开始年份
        dataEndTime: '', // 数据结束年份
        governmentDataProvider: '', // 政务数据提供方
        dataLevel: '', // 数据所在层级
        // 共享信息模块
        sharedType: '', // 共享类型（文本，如“无条件共享”）
        sharedCondition: '', // 共享条件（仅共享类型为“有条件”时显示）
        isPublic: '', // 是否向社会开放（文本，如“是”）
        sharedWay: [], // 共享方式（数组，存显示文本，如“数据库”）
        // 数据项模块
        dataItems: []
      },
      // 2. 定义映射表（复用zybmInfo的逻辑，确保显示文本一致）
      dataTypeMap: {
        '0': '字符串型', '1': '数值型N', '2': '货币型Y', '3': '日期型D',
        '4': '日期时间型T', '5': '逻辑型L', '6': '备注型M', '7': '通用型G',
        '8': '双精度型B', '9': '整型I', '10': '浮点型F', '11': '二进制blob', '12': '长文本text'
      },
      isDictMap: { '0': '是', '1': '否' },
      sharedTypeMap: { 0: '无条件共享', 1: '有条件共享', 2: '不予共享' },
      isRequiredMap: { '0': '是', '1': '否' },
      sharedWayMap: { '0': '数据库', '1': 'API服务', '2': '文件' },
      dataLevelMap: { '0': '国家级', '1': '省级', '2': '市级', '3': '县区级' },
      updateCycleMap: {
        '0': '实时',
        '1': '每天',
        '2': '每周',
        '3': '每月',
        '4': '每季度',
        '5': '每半年',
        '6': '每年',
        7: '其他'
      },
      dataClassificationMap: { '0': '一般数据', '1': '重要数据', '2': '核心数据' },
      // 状态样式映射
      statusTypeMap: {
        '0': 'warning', // 待审批-警告色
        '1': 'info', // 数据局审批通过-信息色
        '2': 'success', // 审批通过-成功色
        '3': 'danger', // 审批拒绝-危险色
        '4': 'gray', // 已撤销-灰色
        '5': 'danger' // 已撤销-灰色

      },
      // 编目状态映射表
      catalogStatusMap: {
        0: '待发布',
        1: '发布待审核',
        2: '已发布',
        3: '发布驳回',
        4: '下线待审核',
        5: '已下线',
        6: '下线驳回',
        7: '删除'
      },
      catalogStatusTag: {
        0: 'gray',
        1: 'info',
        2: 'success',
        3: 'danger',
        4: 'info',
        5: 'danger',
        6: 'danger',
        7: 'danger'

      },
      code: '',
      cmOptions: {
        // mode: 'text/javascript',
        mode: 'application/json',

        gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
        lineNumbers: true,
        line: true,
        lint: true,
        lineWrapping: true,
        autofocus: true,
        autoCloseBrackets: true,
        foldGutter: true, // 块槽
        hintOptions: { completeSingle: true },
        matchTags: { bothTags: true },
        matchBrackets: true,
        showCursorWhenSelecting: true,
        styleSelectedText: true,
        styleActiveLine: true,
        autoRefresh: true,
        highlightSelectionMatches: {
          minChars: 2,
          trim: true,
          style: 'matchhighlight',
          showToken: false
        }
      },
      codemirrorStyle: {
        fontSize: '18px',
        lineHeight: '150%',
        height: '300px',
        border: '1px solid #EBEEF5'
      },
      providerOptions: []

    }
  },
  created() {
    this.loadProviders()
  },
  methods: {
    // // 获取状态文本
    // getStatusText(status) {
    //   return this.statusMap[status] || '未知状态'
    // },
    // 获取状态样式
    getStatusType(status) {
      return this.statusTypeMap[status] || 'default'
    },
    // 新增：申请状态标签类型映射（与之前的状态逻辑保持一致）
    getAppStuType(status) {
      const typeMap = {
        '待审批': 'warning',
        '数据局审批通过': 'info',
        '审批通过': 'success',
        '审批拒绝': 'danger',
        '已撤销': 'default'
      }
      return typeMap[status] || 'default'
    },
    formatTime(timeStr) {
      if (!timeStr || timeStr === 'null' || timeStr === 'undefined') {
        return '未填写'
      }
      return timeStr.includes(' ') ? timeStr.split(' ')[0] : timeStr
    },
    handleClose() {
      this.detailData = null
      // 关闭时重置formData，避免下次打开残留旧数据
      this.formData = {
        dataNodes: [],
        catalogName: '',
        dataSource: '',
        catalogDescription: '',
        updateCycle: '',
        dataClassification: '',
        dataVolume: '',
        dataBeginTime: '',
        dataEndTime: '',
        governmentDataProvider: '',
        dataLevel: '',
        sharedType: '',
        sharedCondition: '',
        isPublic: '',
        sharedWay: [],
        dataItems: [],
        catalogStatus: ''
      }
    },
    setSharingAppData(data, resources) {
      this.form = {
        ...data,
        appStu: this.statusMap[data.appStu] || data.appStu,
        appMethod: this.methodMap[data.appMethod] || data.appMethod
      }
      if (data.appDept) {
        const cur = this.providerOptions.filter(item => {
          return item.id === data.appDept
        })
        if (cur.length === 1) {
          // 申请单位
          this.form.appDept = cur[0].name
        }
      }
      this.dataResources = resources
    },
    setDetailData(data, resources) {
      this.detailData = data
      console.log('后端返回的编目详情数据：', data, data.catalogStatus)

      // 1. 处理基本信息模块：编码转文本、数组提取显示值
      const formattedFormData = {
        // 信息资源分类：从对象数组中提取label/name
        dataNodes: (data.dataNodes || []).map(node => node.label || node.name || '未知分类'),
        // 编目名称
        catalogName: data.catalogName || '',
        // 信息资源提供方：后端可能返回对象（含id/name），提取name
        dataSource: data.dataSource?.name || data.dataSource || '',
        // 信息资源摘要
        catalogDescription: data.catalogDescription || '',
        // 更新周期：编码转文本
        updateCycle: this.updateCycleMap[data.updateCycle?.toString()] || data.updateCycle || '',
        // 数据分级：编码转文本
        dataClassification: this.dataClassificationMap[data.dataClassification?.toString()] || data.dataClassification || '',
        // 数据量
        dataVolume: data.dataVolume || '',
        // 数据时间范围
        dataBeginTime: data.dataBeginTime || '',
        dataEndTime: data.dataEndTime || '',
        // 政务数据提供方
        governmentDataProvider: data.governmentDataProvider || '沧州市数据局',
        // 数据所在层级：编码转文本
        dataLevel: this.dataLevelMap[data.dataLevel?.toString()] || data.dataLevel || '',

        // 2. 处理共享信息模块
        sharedType: this.sharedTypeMap[data.sharedType?.toString()] || data.sharedType || '',
        sharedCondition: data.sharedCondition || '',
        // 是否向社会开放：编码转文本
        isPublic: data.isPublic != null ? data.isPublic.toString() : '',
        // 共享方式：从对象数组中提取编码→转文本
        sharedWay: (data.sharedWay || []).map(way => this.sharedWayMap[way.sharedCode?.toString()] || way.sharedCode || '未知方式'),

        // 3. 处理数据项模块
        dataItems: (data.catalogItems || []).map(item => ({
          ...item,
          dataTypeLabel: this.dataTypeMap[item.dataType?.toString()] || '未知类型',
          isDictLabel: this.isDictMap[item.isDict?.toString()] || '未知',
          sharedTypeLabel: this.sharedTypeMap[item.sharedType] || '未知',
          isRequiredLabel: this.isRequiredMap[item.isRequired?.toString()] || '未知'
        })),
        catalogStatus: this.catalogStatusMap[data.catalogStatus] || '未知状态',
        catalogStatusTag: data.catalogStatus
      }

      this.formData = formattedFormData
      this.dataResources = resources
      this.visible = true
    },
    downLoad(item) {
      console.log(item)
      downloadFile(item.id).then(res => {
        // 3. 将 blob 转换为可下载的链接
        const blob = new Blob([res], {
          // 根据文件类型设置 MIME 类型
          // 常见类型：application/pdf、image/jpeg、application/vnd.ms-excel 等
          type: 'application/octet-stream'
        })

        // 4. 创建 a 标签并触发下载
        const url = window.URL.createObjectURL(blob)
        const a = document.createElement('a')
        a.href = url
        a.download = item.name
        document.body.appendChild(a)
        a.click() // 触发点击下载

        // 5. 清理资源
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url) // 释放 blob URL

        this.$message.success('文件下载成功')
      })
    },
    onCmReady(cm) {
      cm.on('inputRead', (cm, obj) => {
        if (obj.text && obj.text.length > 0) {
          const c = obj.text[0].charAt(obj.text[0].length - 1)
          if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
            cm.showHint({ completeSingle: false }) // 自动填充关闭了它
          }
        }
      })
    },
    // 部门
    loadProviders() {
      getAlldept().then(res => {
        console.log(res, '信息资源提供方')
        this.providerOptions = res
      })
      // 实际项目中从接口获取
    }
  }
}
</script>

<style scoped>
/* 新增空状态样式 */
.empty-state {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  padding: 40px 0;
  color: #909399;
  background-color: #fafafa;
  border-radius: 4px;
}

.empty-icon {
  margin-bottom: 16px;
}

.empty-text {
  font-size: 14px;
}

/* ------------- 申请信息区域专属样式 ------------- */
/* 1. 动态字段分组样式：增加边框和标题，区分普通字段 */
.dynamic-group {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #ebeef5;
  border-radius: 6px;
  background-color: #fafafa;
}

.desc-gt {
  display: flex;
  align-items: center;
}

/* 动态分组标题：突出显示 */
.group-title {
  font-size: 14px;
  font-weight: 500;
  color: #409EFF;
  margin-bottom: 12px;
  padding-left: 8px;
  border-left: 2px solid #409EFF;
}

.my-tit {
  text-align: right;
  vertical-align: middle;
  width: 90px;

  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: 700;
}

.desc-gt .tit-con {
  width: calc(100% - 90px);
}

/* 动态字段：增加左侧缩进，与分组标题对齐 */
.dynamic-item {
  margin-left: 8px !important;
}

/* 2. 状态标签优化：增加内边距，调整颜色对比度 */
.status-tag {
  padding: 2px 10px !important;
  font-size: 13px !important;
}

/* 调用方式标签：统一颜色 */
.method-tag {
  padding: 2px 10px !important;
  font-size: 13px !important;
}

/* 3. IP地址样式：增加 monospace 字体，提升可读性 */
.ip-content {
  font-family: "Courier New", Courier, monospace;
  color: #67C23A;
  /* 绿色突出IP地址 */
}

/* 5. 附件链接优化：增加图标，提升点击辨识度 */
.attachment-link {
  color: #409EFF;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.attachment-link:hover {
  color: #66b1ff;
  text-decoration: underline;
}

/* 6. 统一表单项高度：确保所有表单项上下对齐 */
.detail-form-item {
  margin-bottom: 18px !important;
  /* 增加底部间距，避免拥挤 */
  display: flex;
  align-items: center;
  /* 标签和内容垂直居中 */

  ::v-deep .el-form-item__label {
    width: 120px !important;
    text-align: right !important;
    font-size: 14px;
    color: #606266;
    padding-right: 12px;
    height: 36px;
    /* 固定标签高度，避免上下错落 */
    line-height: 36px !important;
    /* 标签文本垂直居中 */
  }

  ::v-deep .el-form-item__content {
    font-size: 14px;
    color: #303133;
    line-height: 36px;
    /* 内容行高与标签一致 */
    height: 36px;
    /* 固定内容高度，确保对齐 */
  }
}

::v-deep .file-form-item .el-form-item__label {
  width: 55px;
}

::v-deep .bz-form-item .el-form-item__label {
  width: 70px;
}

/* 特殊处理：备注和动态分组的表单项高度（多行文本需自适应） */
.detail-form-item:last-child,
.remark-content,
.dynamic-item {
  ::v-deep .el-form-item__content {
    height: auto;
    /* 取消固定高度，支持多行文本 */
    line-height: 1.6;
  }
}

/* 7. 空状态样式统一：所有空值显示一致的灰色文本 */
.empty-tip {
  color: #909399;
  font-size: 13px;
  font-style: italic;
  /* 斜体区分空状态 */
}

/* 弹窗整体样式 */
.zybm-detail-dialog {
  ::v-deep .el-dialog__body {
    padding: 20px;
    background-color: #fafafa;
  }

  ::v-deep .el-dialog__header {
    border-bottom: 1px solid #ebeef5;
    margin-bottom: 10px;
    padding-bottom: 10px;
  }

  ::v-deep .el-dialog__title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
  }
}

/* 模块卡片样式：统一圆角、阴影、间距 */
.section-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  padding: 16px 20px;
  margin-bottom: 20px;
  transition: box-shadow 0.3s ease;
}

.section-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 模块标题栏：图标+文本+分割线，增强视觉层次 */
.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  margin-left: -15px;
}

.section-icon {
  color: #409EFF;
  font-size: 18px;
  margin-right: 8px;
}

.section-title {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
}

/* 模块内容区：统一内边距 */
.section-content {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* 表单项样式：统一标签宽度、间距 */
.detail-form-item {
  margin-bottom: 16px !important;
  width: 50%;

  ::v-deep .el-form-item__label {
    width: 120px !important;
    text-align: right !important;
    font-size: 14px;
    color: #606266;
    padding-right: 12px;
  }

  ::v-deep .el-form-item__content {
    font-size: 14px;
    color: #303133;
    line-height: 24px;
  }
}

/* 表单内容区：空状态、标签项样式 */
.form-content {
  padding: 2px 0;
}

.file-pbox {
  display: flex;
  flex-direction: column;
}

.file-item {
  display: inline-block;
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 6px;
  border: 5px;
  cursor: pointer;
  display: inline-block;
  max-width: 390px;
}

.empty-tip {
  color: #909399;
  font-size: 13px;
}

.tag-item {
  display: inline-block;
  background-color: #ecf5ff;
  color: #409EFF;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 6px;
}

.way-item {
  display: inline-flex;
  align-items: center;
  background-color: #f0f9eb;
  color: #67C23A;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 13px;
  margin-right: 8px;
  margin-bottom: 8px;
}

.way-item i {
  margin-right: 4px;
  font-size: 12px;
}

/* 共享条件特殊样式 */
.condition-content {
  background-color: #f5f7fa;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 0px 12px;
  min-height: 36px;
  display: flex;
  align-items: center;
}

/* 状态文本样式 */
.status-text {
  margin-left: 6px;
}

/* 底部按钮区域 */
.dialog-footer {
  display: flex;
  justify-content: center;
  padding-top: 10px;
}
</style>
